<template>
	<view >
		<uni-status-bar></uni-status-bar>
		<view >
			<view class="iconfont icon-guanbi flex align-center justify-center font-lg" style="width: 100rpx; height: 100rpx;" hover-class="bg-light"@click="back"></view>
		</view>
		
		<view class="text-center" style="padding-top: 130rpx;padding-bottom: 70rpx;font-size: 55rpx;">{{status ? '注册账号':'账号密码登录'}}</view>
		
		<view class="px-2">
			<template v-if="!status">
				<view class="mb-2">
					<input type="text" v-model="id"   placeholder="昵称/手机号/邮箱" class="border-bottom p-2"/>
				</view>
				<view class="mb-2 flex align-stretch">
					<input type="text" v-model="password" placeholder="请输入密码" class="border-bottom p-2 flex-1"/>
					<view class="border-bottom flex align-center justify-center font text-muted" style="width: 150rpx;">忘记密码？</view>
				</view>
				<view class="py-2 px-3">
					<button class="bg-main text-white" style="border-radius: 50rpx;border: 0;" type="primary" :disabled="disabled" :class="disabled ? 'bg-main-disabled':'bg-main'" @click="submit">登录</button>
				</view>
			</template>
			
			<template v-else>
				<view class="mb-2 flex align-stretch">
					<input type="text" v-model="id" placeholder="请输入账号" class="border-bottom p-2 flex-1"/>
				</view>
				<view class="mb-2 flex align-stretch">
					<input type="text" v-model="password" placeholder="请输入密码" class="border-bottom p-2 flex-1"/>
				</view>
				<view class="py-2 px-3">
					<button class="bg-main text-white" style="border-radius: 50rpx;border: 0;" type="primary" :disabled="disabled" :class="disabled ? 'bg-main-disabled':'bg-main'" @click="register">注册</button>
				</view>
			</template>
		</view>
		
		<view class="flex align-center justify-center pt-2 pb-4">
			<view class="text-primary font-sm" @click="changeStatus">
				{{status?'账号密码登录':'注册账号'}}
			</view>
			<text class="text-muted mx-2">|</text>
			<view class="text-primary font-sm">登录遇到问题</view>
		</view>
		
		<view class="flex align-center justify-center">
			<view style="height: 1rpx;background-color: #dddddd;width: 100rpx;"></view>
			<view class="mx-2 text-muted">社交账号登录</view>
			<view style="height: 1rpx;background-color: #dddddd;width: 100rpx;"></view>
		</view>
		
		
		<other-login></other-login>
		
		<view class="flex align-center justify-center text-muted">
			注册即代表同意<text class="text-primary">《接班人社区协议》</text>
		</view>
	</view>
	
</template>

<script>
	import uniStatusBar from '@/components/uni-ui/uni-status-bar/uni-status-bar.vue';
	import otherLogin from '@/components/common/other-login.vue';
	export default {
		components: {
			uniStatusBar,
			otherLogin
		},
		data() {
			return {
				status:false,
				id:"",
				password:"",
				
				codeTime:0,
				loading:false
			}
		},
		onLoad() {
			let {statusBarHeight} = uni.getSystemInfoSync()
			this.statusBarHeight=statusBarHeight
		},
		computed: {
			disabled() {
				if (this.id === '' || this.password === '') {
					return true
				}
				return false
			}
		},
		methods: {
					//注册
				async register(){
						 
										const res = await uniCloud.callFunction({
											name: 'user',
											data: {
												action: 'add',
												id: this.id,
												password:this.password
											}
										})
										if (res.result.id) {
											uni.showToast({
												title: '注册成功',
												icon: 'none'
											})
											
										}
										const e = await uniCloud.callFunction({
											name: 'userinformation',
											data: {
													action: 'add',
													id: this.id,
												    username: "",
												    userpic: "",
												    sex: "",
												    birthday: "",
												    emotionText: "",
												    job: "",
												    pickerText: ""
											}
										})
										this.id = ''
										this.password=''
					},
					
					//返回
					back(){
						uni.navigateBack({
							delta: 1
						});
						
					},
					//初始化表单
					initForm(){
						this.id=''
						this.password=''
						
					}, 
					// 切换登录方式
						changeStatus(){
							// 初始化表单
							this.initForm()
							this.status = !this.status
						},
					
					// 提交
					async submit(){
						
							// 根据用户id查询用户信息
										 
											const res = await uniCloud.callFunction({
												name: "user",
												data: {
													action: 'getOne',
													id:this.id
												}
											})
											if(res.result.data[0].password === this.password){
												 this.$store.commit('changeLoginStatus',this.id)
												 console.log(this.$store.state.loginsStatus);//现在登陆的账号
												uni.showToast({
													title: '登录成功',
													icon: 'none',
												})
											}
											else{
												uni.showToast({
													title: '账号或密码错误',
													icon: 'none'
												})
											}

					}
				
			},
	}
</script>

<style>

</style>
